<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:300px;
            width:200px;
            background: black;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            //给id为btnOff的按钮添加单击事件
            $("#btnOff").on("click",function(){
                //解绑事件
                //如果没有参数，就会把这个元素的所有事件全部解绑
                //$("div").off();

                //传入一个字符串参数，参数为绑定事件名称，则会解绑指定名称的事件
                //$("div").off("mouseenter");
               // $("div").off("mouseenter click");

                //如果第二个参数传入："**",解除通过代理的方式绑定的事件，元素本身的事件不会解除
                 $("div").off("click","**");
            });

            //给div绑定一个事件
           /* $("div").on("mouseenter",function(){
                $(this).css("background","red");
            });*/
            $("div").on("click",function(){
                $(this).css("height","500px");
            })

            //div下面的按钮元素绑定事件(通过代理的方式绑定事件)
            $("div").on("click","input",function(){
                alert("这是通过div绑定的事件");
            })
        })
    </script>
</head>
<body>
    <button id="btnOff">解绑事件</button>
    <div>
        <input type="button" value="按钮" id="btn">
    </div>
</body>
</html>